<template>
  <el-form :inline="true" class="demo-form-inline" style="margin-top: 5px;">
    <el-form-item label="出发城市">
      <city-input v-model:city-object="selector.startCity"></city-input>
    </el-form-item>
    <el-form-item label="到达城市">
      <city-input v-model:city-object="selector.destCity"></city-input>
    </el-form-item>
  </el-form>

  <el-form :inline="true">
    <el-form-item label="出发时间晚于">
      <time-input v-model:time-str="selector.startTime"></time-input>
    </el-form-item>
    <el-form-item label="到站时间早于">
      <time-input v-model:time-str="selector.endTime"></time-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryTraffic">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :border="true" :data="tableData">
    <el-table-column prop="trafficNo" label="编号"/>
    <el-table-column prop="trafficName" label="名称"/>

    <el-table-column label="出发城市">
      <template v-slot="{row:{startCity}}">
        {{cityToStr(startCity)}}
      </template>
    </el-table-column>
    <el-table-column label="到达城市">
      <template v-slot="{row:{destCity}}">
        {{ cityToStr(destCity) }}
      </template>
    </el-table-column>

    <el-table-column prop="startTime" label="发车时间"/>
    <el-table-column prop="reachTime" label="到达时间"/>
    <el-table-column prop="phone" label="负责人电话"/>

    <el-table-column label="查看详情" v-slot="{row:{trafficId}}">
      <el-button
          type="primary"
          @click="router.push(`/user/detail/${productTypeStr}/${trafficId}`)"
      >查看详情
      </el-button>
    </el-table-column>
  </el-table>
  <img v-if="loading" src="/src/assets/loading.gif" alt="网络错误"/>
  <div v-if="ended" class="el-empty__description">
    <p>已经到底了</p>
  </div>

</template>

<script>
import axios from "~/config/axios";
import {ElMessage} from "element-plus";
import CityInput from "~/components/CityInput.vue";
import TimeInput from "~/components/TimeInput.vue";
import {reactive, ref, toRefs} from "vue";
import {useRoute} from "vue-router";
import router from "~/config/router.js";
import {productTypeCode} from "~/config/const.js"
import {cityToStr} from "~/config/utils.js"

export default {
  components: {TimeInput, CityInput},
  setup(props, {expose}) {

    const productTypeStr = (useRoute().params.productTypeStr)
    const productType = productTypeCode[productTypeStr]

    const state = reactive({

      tableData: ref([]), // 数据列表
      currentPage: 1, // 当前页
      pageSize: 10, // 分页大小

      selector: {
        startCity: ref(),
        destCity: ref(),
        startTime: ref(),
        endTime: ref()
      },

      loading: false,
      ended: true,

      buyDrawer: false,
      aimTrainTicket: {},
      storeMap: {},
      buyDate: new Date(),
    });

    const fetchData = async () => {

      const t = state.selector
      const startCityId = t?.startCity?.cityId
      const destCityId = t?.destCity?.cityId
      const startTime = t?.startTime
      const endTime = t?.endTime

      const urlParam = {
        startCityId,
        destCityId,
        startTime,
        endTime,
        productType
      }

      const queryObject = Object.assign({}, urlParam, {
        pageNumber: state.currentPage,
        pageSize: state.pageSize,
      });
      const records = await axios.get("/traffics/userQuery", {params: queryObject})

      state.loading = false;
      state.tableData = state.tableData.concat(records);
      if (records.length == 0) {
        state.ended = true;
      }
    };

    const queryTraffic = () => {
      state.tableData = [];
      state.currentPage = 1;
      state.ended = false;
      state.loading = true;
      fetchData();
    };

    const bottomAction = () => {
      if (!state.loading && !state.ended) {
        console.log("触底，页面为：", state.currentPage);
        state.loading = true;
        // 只有在列表未在请求中，并且有剩余数据可请求，并且触底的情况下，才能发起请求
        state.currentPage += 1;
        // 获取列表数据
        fetchData();
      }
    }


    expose({
      bottomAction
    })
    return {
      ...toRefs(state),
      queryTraffic,
      productType,
      productTypeStr,
      cityToStr,
      router
    };
  },
};
</script>
<style scoped>
</style>